<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="$t('云申请记录')"
    width="1100px"
    destroy-on-close
    :close-on-click-modal="false">
    <div class="app-container">
      <!-- *************************************搜索区************************************* -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
        <el-form-item :label="$t('sku编号')" prop="skuNo">
          <el-input
            v-model="queryParams.skuNo"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('供应商名称')" prop="distrName">
          <el-input
            v-model="queryParams.distrName"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('中文名')" prop="skuNameCn">
          <el-input
            v-model="queryParams.skuNameCn"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('日文名')" prop="skuNameJp">
          <el-input
            v-model="queryParams.skuNameJp"
            clearable
            style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{
            $t('搜索')
          }}</el-button>
        </el-form-item>
      </el-form>

      <!-- 增删改查 -->
      <el-row :gutter="10" class="mb8"> </el-row>

      <el-table :height="calTableHeight() - 150" v-loading="loading" :data="tableData" row-key="menuId">
        <!-- sku -->
        <el-table-column
          align="center"
          width="110"
          show-overflow-tooltip
          prop="skuNo"
          :label="$t('sku编号')"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div style="cursor: pointer; color: #1890ff">
              {{ scope.row.skuNo }}
            </div>
          </template>
        </el-table-column>
        <!-- 主图 -->
        <el-table-column :label="$t('申请时价格')" prop="applyPrice" align="center" width="110">
          <template slot-scope="{ row }">
            {{ row.applyPrice ? (+row.applyPrice).toFixed() : '' }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          show-overflow-tooltip
          prop="cloudPrice"
          :label="$t('供应商价格')"
          width="110">
          <template slot-scope="{ row }">
            {{ row.cloudPrice ? (+row.cloudPrice).toFixed() : '' }}
          </template>
        </el-table-column> -->

        <el-table-column align="center" show-overflow-tooltip prop="applyNum" :label="$t('申请数量')" />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="useNum"
          :label="$t('剩下可用数量')"
          width="110" />
        <el-table-column align="center" show-overflow-tooltip prop="saleNum" :label="$t('出售数量')" />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="waitBillNum"
          :label="$t('待出账单数量')"
          width="110" />
        <el-table-column align="center" show-overflow-tooltip prop="payNum" :label="$t('付款数量')" />
        <el-table-column
          show-overflow-tooltip
          :label="$t('申请通过状态')"
          align="center"
          prop="applyStatus"
          width="110">
          <template slot-scope="scope">
            <span v-if="scope.row.applyStatus == 1" style="color: red">{{ $t('待审批') }}</span>
            <span v-else-if="scope.row.applyStatus == 2" style="color: rgb(86, 143, 0)">
              {{ $t('审批通过') }}
            </span>
            <span v-else-if="scope.row.applyStatus == 3" style="color: #c0c4cc">{{ $t('拒绝') }} </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('付款完成状态')"
          align="center"
          prop="payStatus"
          width="110">
          <template slot-scope="scope">
            <!-- 0：未支付 1：部分支付 2：支付完成 -->
            <span v-if="scope.row.payStatus == 0" style="color: red">{{ $t('未支付') }}</span>
            <span v-else-if="scope.row.payStatus == 1" style="color: red">{{ $t('部分支付') }} </span>
            <span v-else-if="scope.row.payStatus == 2" style="color: rgb(86, 143, 0)">
              {{ $t('支付完成') }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip :label="$t('退回数量')" align="center" prop="backNum" />
        <el-table-column
          show-overflow-tooltip
          :label="$t('申请日期')"
          align="center"
          prop="applyTime"
          width="150" />
        <el-table-column
          width="150"
          show-overflow-tooltip
          :label="$t('所属者')"
          align="center"
          prop="applyDistrName" />
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </el-dialog>
</template>

<script>
import { getSkuSellerApplyList } from '@/api/distribution/sku/sellerApplicationList'
export default {
  name: 'cloudApplyRecord',
  components: {},
  data() {
    return {
      title: '',
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuId: '',
      },
    }
  },
  created() {},

  methods: {
    handleOpen({ title, skuId }) {
      this.title = title
      this.queryParams.skuId = skuId
      this.getList()
      this.showDialog = true
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getSkuSellerApplyList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
